<template>
    <div class="choose-container py-[60px]">
        <div class="w-[1200px] mx-auto">
            <Title
                title="为什么选择艾斯康个性化营养定制?"
                desc="WHY CHOOSE ACEHEAL?"
            />
            <div
                class="text-[14px] text-center text-[#333] leading-[24px] mt-[42px] tracking-[1px]"
            >
                每个人的基因、生活方式、饮食习惯和健康状态各不相同，这导致相同的膳食营养补充剂对不同个体的效果差异巨大。传统的营养补充方案通常以"平均需求"为基准，忽视了个体差异。艾斯康的个性化营养定制则通过基因分析、健康数据、健康问卷、功能医学分析等多种科学方法，根据不同人群、不同体质，结合不同生活饮食习惯、不同健康需求，制定个性化的精准营养方案，通过专业级的膳食营养补充剂，多对一的健康顾问团队，满足各类人群的营养健康需求
            </div>
            <div class="flex justify-between items-center my-[80px] gap-[88px]">
                <div
                    v-for="(item, index) in statisticsList"
                    :key="index"
                    class="text-center flex h-[60px] gap-[10px]"
                >
                    <div
                        class="text-[48px] font-bold text-[#4CAF50] flex items-start"
                    >
                        <span font-stretch-expanded>{{
                            animatedNumbers[index]
                        }}</span>
                        <span class="text-[20px]">{{ item.unit }}</span>
                    </div>
                    <div
                        class="text-[24px] text-[#262626] mt-[4px] flex flex-col items-start justify-between"
                    >
                        {{ item.text }}
                        <span class="text-[16px] text-[#999]">
                            {{ item.label }}
                        </span>
                    </div>
                </div>
            </div>
            <div overflow-hidden>
                <div class="relative">
                    <swiper
                        :modules="swiperModules"
                        :slides-per-view="3.5"
                        :space-between="24"
                        class="mySwiper relative"
                        @swiper="onSwiper"
                    >
                        <swiper-slide
                            v-for="(advantage, index) in [
                                ...advantages,
                                ...advantages
                            ]"
                            :key="index"
                        >
                            <div
                                ref="animateElements"
                                class="bg-white relative h-[510px] rounded-lg shadow-sm overflow-hidden transition-all hover:-translate-y-1 hover:shadow-md"
                            >
                                <img
                                    :src="advantage.image"
                                    :alt="advantage.title"
                                    class="w-full h-[315px] object-cover"
                                />
                                <div
                                    class="absolute flex items-center rounded-[5px] justify-center bg-white top-[285px] left-[204px] w-[100px] h-[100px]"
                                >
                                    <img
                                        :src="advantage.icon"
                                        :alt="advantage.title"
                                        class="w-[80px] h-[80px] object-cover"
                                    />
                                </div>
                                <div class="p-[20px]">
                                    <div
                                        style="border-left: 4px solid #4caf50"
                                        class="font-medium text-[18px] pl-[10px] flex items-start"
                                    >
                                        {{ advantage.title }}
                                    </div>
                                    <div
                                        style="border-left: 4px solid #deecd8"
                                        class="text-[#999] text-[14px] pl-[10px]"
                                    >
                                        {{ advantage.subTitle }}
                                    </div>
                                    <p
                                        class="text-sm text-gray-500 mt-[16px]"
                                        overflow-hidden
                                        line-clamp-4
                                        text-ellipsis
                                    >
                                        {{ advantage.desc }}
                                    </p>
                                </div>
                            </div>
                        </swiper-slide>
                    </swiper>
                    <div class="flex justify-end mt-[40px] space-x-[40px]">
                        <a-button
                            type="primary"
                            shape="circle"
                            style="height: 60px; width: 60px; font-size: 20px"
                            @click="prevSlide"
                            :icon="h(LeftOutlined)"
                        />

                        <a-button
                            type="primary"
                            shape="circle"
                            style="height: 60px; width: 60px; font-size: 20px"
                            @click="nextSlide"
                            :icon="h(RightOutlined)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Title } from './index'

import type { Swiper as SwiperType } from 'swiper'
import type { SwiperModule } from 'swiper/types'

import chooseIcon_1 from '../../assets/images/home/choose_icon_1.png'
import chooseIcon_2 from '../../assets/images/home/choose_icon_2.png'
import chooseIcon_3 from '../../assets/images/home/choose_icon_3.png'

import { useAnimation } from '@/composables/useAnimation'

import 'swiper/swiper-bundle.css'

interface StatisticsItem {
    number: string
    unit: string
    text: string
    label: string
}

interface FeatureItem {
    image: string
    score: string
    title: string
    desc: string
    icon: string
}

const statisticsList: StatisticsItem[] = [
    { number: '25', unit: '+', text: '国家', label: 'COUNTRY' },
    { number: '500', unit: '+', text: '品牌植物成分', label: 'COMPONENT' },
    { number: '1000', unit: '+', text: '专利', label: 'PATENT' },
    { number: '500', unit: '+', text: '临床验证', label: 'CLINICAL VALIDATION' }
]

const animatedNumbers = ref(statisticsList.map(() => 0))
const observer = ref<IntersectionObserver | null>(null)
const swiperModules: SwiperModule[] = []
const swiperRef = ref<SwiperType>()
const onSwiper = (swiper: SwiperType) => {
    swiperRef.value = swiper
}

const animateNumber = (index: number, target: number) => {
    const duration = 2000
    const startTime = Date.now()
    const startValue = 0

    const updateNumber = () => {
        const currentTime = Date.now()
        const elapsed = currentTime - startTime

        if (elapsed < duration) {
            const progress = 1 - Math.pow(1 - elapsed / duration, 2)
            animatedNumbers.value[index] = Math.round(
                startValue + (target - startValue) * progress
            )
            requestAnimationFrame(updateNumber)
        } else {
            animatedNumbers.value[index] = target
        }
    }

    requestAnimationFrame(updateNumber)
}

const prevSlide = () => {
    if (swiperRef.value) {
        swiperRef.value.slidePrev()
    }
}
const nextSlide = () => {
    if (swiperRef.value) {
        swiperRef.value.slideNext()
    }
}
const advantages = [
    {
        title: '有数',
        subTitle: '精准分析，解锁生理',
        icon: chooseIcon_1,
        desc: '标准的临床血液报告显示哪些指标超出正常范围。通过了解哪些血液指标对衰老过程影响最大和当前健康风险，人工智能驱动的建议可以提供健康改善方案',
        image: 'https://oss.acehls.com/obj/youshu2x.png'
    },
    {
        title: '有料',
        subTitle: '品牌成分，专利认证',
        icon: chooseIcon_2,
        desc: '100%不含人工添加剂，从源头到客户手中。透明是我们的坚持。甄选全球顶级供应商，确保专业级成分的质量和功效，每种配方均不含硬脂酸镁或二氧化钛',
        image: 'https://oss.acehls.com/obj/youliao2x.png'
    },
    {
        title: '有证',
        subTitle: '临床验证，医疗级标准',
        icon: chooseIcon_3,
        desc: '我们坚持以科学依据、临床试验验证、临床剂量标准，据为数据支撑，打造诚实配方，以提供最安全、最有效的产品，为消费者的健康保驾护航',
        image: 'https://oss.acehls.com/obj/youzheng2x.png'
    },
    {
        title: '有据',
        subTitle: '科学机制，循证定制',
        icon: chooseIcon_2,
        desc: '以“疾病发生机制”为后盾的个性化定制,从三个维度进行个性化定制,通过技术和成分组合，力求最佳的吸收和生物利用度，以实现最大效力和最佳结果，打造您的专属的健康配方',
        image: 'https://oss.acehls.com/obj/youju2x.png'
    }
]

onMounted(() => {
    observer.value = new IntersectionObserver(
        entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    statisticsList.forEach((item, index) => {
                        animateNumber(index, parseInt(item.number))
                    })
                    observer.value?.disconnect()
                }
            })
        },
        {
            threshold: 0.1
        }
    )

    const container = document.querySelector('.flex.justify-between')
    if (container) {
        observer.value.observe(container)
    }
})

onUnmounted(() => {
    if (observer.value) {
        observer.value.disconnect()
    }
})

const { animateElements } = useAnimation()

defineExpose({
    getAnimateElements: () => animateElements.value
})
</script>

<style lang="less" scoped>
.choose-container {
    background-image: url('@/assets/images/home/why-choose-bg.png');
    background-size: 1140px 905px;
    background-position: top right;
    background-repeat: no-repeat;
    background-color: #f4faf9;
}

.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}
</style>
